<script setup>
import { ref } from 'vue'
const handleEdit = (index, row) => {
  console.log(index, row)
}
const handleDelete = (index, row) => {
  console.log(index, row)
}

const dataList = ref([
  {
    name:"轮播图1",
    imgUrl:'https://img2.baidu.com/it/u=2864525257,2661889927&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800'
  },
  {
    name:"轮播图2",
    imgUrl: "https://img1.baidu.com/it/u=3099731644,1611420409&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500"
  },
  // {
  //   name:"轮播图3",
  //   imgUrl: "https://img1.baidu.com/it/u=2207667442,4175802803&fm=253&fmt=auto&app=120&f=JPEG?w=1067&h=800"
  // },
  // {
  //   name:"轮播图4",
  //   imgUrl: "https://img1.baidu.com/it/u=1547004581,3636033166&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"
  // },
  // {
  //   name:"轮播图5",
  //   imgUrl: 'https://img2.baidu.com/it/u=4192827041,156170923&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500'
  // },

])

// import type { ComponentSize } from 'element-plus'
const currentPage4 = ref(1)
const pageSize4 = ref(2)
// const size = ref<ComponentSize>('default')
const background = ref(false)
const disabled = ref(false)

const handleSizeChange = (val) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val) => {
  console.log(`current page: ${val}`)
}
</script>

<template>
  <div>
  <font>标题
    <el-input v-model="input" style="width: 240px" placeholder="Please input" />
    </font>
  </div>
  <div style="height:15px"></div>
  <div class="mb-4">
    <el-button type="primary" plain>增加</el-button>
    <el-button type="success" plain>查询</el-button>
    <el-button type="warning" plain>修改</el-button>
    <el-button type="danger" plain>删除</el-button>
  </div>
  <div style="height:15px"></div>
  <el-table :data="dataList" :border="true">
    <el-table-column type="index" width="80px"></el-table-column>
    <el-table-column label="图片" >
      <template #default="scope">
        <el-image :src="scope.row.imgUrl" style="width:40% ;"></el-image>
      </template>
    </el-table-column>

    <el-table-column label="标题" width="180px">
      <template #default="scope">
        <el-popover effect="light" trigger="hover" placement="top" width="auto">
          <template #default>
            <div>name: {{ scope.row.name }}</div>
          </template>
          <template #reference>
            <el-tag>{{ scope.row.name }}</el-tag>
          </template>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column label="操作" width="180px">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
          Edit
        </el-button>
        <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
        >
          Delete
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <div style="height:15px"></div>
  <div class="demo-pagination-block">
    <el-pagination
        v-model:current-page="currentPage4"
        v-model:page-size="pageSize4"
        :page-sizes="[100, 200, 300, 400]"
        :size="size"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>

</template>

<style scoped lang="scss">

</style>